@import '../../../assets/mini_program/base.css';

.mini-app,
.wx-mini-app__webviews,
.wx-mini-app__launch-screen {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
}

.mini-app__header{
	width:100%;
	height:55px;
	-webkit-app-region: drag; /* 拖动 */

	/* 禁用选择文本，防止双击放大 */
	-webkit-user-select: none;
	user-select: none;

}
/* 头部导航 */
.mini-app-navigation {
	position: absolute;
	top: 13px;
	right: 13px;
	border-radius: 32px;
	width: 106px;
	box-sizing: border-box;
	height: 30px;
	flex-direction: row;
	overflow: hidden;
	z-index: 10000000000;
	-webkit-app-region: no-drag; /* 非拖动 */
	padding:0;
	display: flex;
	align-items: center;
	justify-content: center;

	&.wx-mini-app-navigation__actions--black {
		background-color: rgba(255, 255, 255, .8);
		border: 1px solid rgba(234, 234, 234, .8);

		.wx-mini-app-navigation__actions-close {

		}
		.wx-mini-app-navigation__actions-variable {

			&::after {
				background-color: #ccc;
			}
		}
		.wx-mini-app-navigation__actions-func {

		}

	}

	&.wx-mini-app-navigation__actions--white {
		background-color: rgba(0, 0, 0, .2);
		border: 1px solid rgba(234, 234, 234, .8);

		.wx-mini-app-navigation__actions-variable {

			&::after {
				background-color: #ccc;
			}
		}

		.wx-mini-app-navigation__actions-close {
			
		}
	}

	li {
		list-style: none;
		flex: 1;
		position: relative;
		cursor: pointer;
	}
	li:hover{
		background-color: #F2F2F2;
	}
	.wx-mini-app-navigation__actions-func{

		display: flex;
		align-items: center;
		justify-content: center;
		div{
			width:3px;
			height:3px;
			border-radius: 50%;
			background-color: #000;
			margin:0 1px;
		}
		div:nth-child(2){
			width:6px;
			height:6px;
			margin:0 1px;
		}
	}
	.wx-mini-app-navigation__actions-variable {
	
		/* &::after {
			content: '';
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 1px;
			height: 20px;
			opacity: .8;
		} */
		div{
			width:15px;
			height:2px;
			border-radius:10px;
			background-color: #000;
			margin:0 auto;
		}

	}
	
	.wx-mini-app-navigation__actions-close {
		
		.x {
			position: relative;
			width: 2px;
			height: 15px;
			border-radius:2px;
			margin:0 auto;
		}
		.x::before, .x::after {
			content: '';
			position: absolute;
			width: 2px;
			height: 15px;
			border-radius:2px;
			background-color: black;
			top: 50%;
			left: 100%;
			transform: translate(50%, 50%);
		}
		.x::after {
			transform: translate(-50%, -50%) rotate(45deg);
		}
		.x::before {
			transform: translate(-50%, -50%) rotate(135deg);
		}
	}
	.wx-mini-app-navigation__actions-close:hover{
		background-color: #F95C5C;
		.x::before, .x::after {
			background-color: #fff;
		}
	}
	.wx-mini-app-navigation__actions-func,.wx-mini-app-navigation__actions-variable,.wx-mini-app-navigation__actions-close {
		height:100%;
		padding:0 5px;
		display: flex;
		align-items: center;
	}
	

}



/* 启动loading页面 */
.mini-app__launch-screen {
	display: none;
	width:100%;
	height:100%;
	background-color: #fff;
	z-index: 8;

	.mini-app__launch-screen-content {
		position: absolute;
		left: 50%;
		top: 38%;
		transform: translateX(-50%);
	}

	.mini-app__logo {
		width: 100px;
		height: 100px;
		position: relative;

		.mini-app__logo-img {
			width: 84px;
			height: 84px;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			z-index: 1;
			border-radius: 50%;
			overflow: hidden;

			img {
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
			}
		}

		.mini-app__logo-circle {
			width: 100px;
			height: 100px;
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			z-index: 2;
			border: 1px solid #e9e9e9;
			border-radius: 50%;
			box-sizing: border-box;
		}

		.mini-app__green-point {
			position: absolute;
			width: 14px;
			height: 14px;
			border-radius: 50%;
			background-color: #fff;
			top: 0;
			left: 0;
			z-index: 3;
			animation: animX 800ms cubic-bezier(0.36,0,0.64,1) -400ms infinite alternate, animY 800ms cubic-bezier(0.36,0,0.64,1)  0s infinite alternate;

			&::after {
				content: '';
				position: absolute;
				width: 7px;
				height: 7px;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				border-radius: 50%;
				background-color: #59be6b;
			}
		}
	}

	.mini-app__name {
		font-size: 20px;
		color: #333;
		text-align: center;
		padding-top: 36px;
	}
}
@keyframes animX{
	0% {
		left: -7px;
	}
	100% {
		left: 93px;
	}
}

@keyframes animY{
	0% {
		top: -7px;
	}
	100% {
		top: 93px;
	}
}
.mini-app__webviews {
	z-index: 1;
}